<template>
  <el-form
    :model="ruleForm"
    status-icon
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
  >
    <el-form-item label="商品名称" prop="name">
      <el-input
        type="text"
        v-model="ruleForm.name"
        autocomplete="off"
      ></el-input>
    </el-form-item>

    <!-- <el-form-item label="邮件" prop="email">
      <el-input
        type="text"
        v-model="ruleForm.email"
        autocomplete="off"
      ></el-input>
    </el-form-item> -->

    <el-form-item label="描述" prop="description">
          <textarea
            cols="24"
            rows="3"
            v-model.number="ruleForm.description"
          ></textarea>
      </el-form-item>  
    

    <el-form-item label="单价" prop="price">
      <el-input
        type="text"
        v-model="ruleForm.price"
        autocomplete="off"
      ></el-input>
    </el-form-item>

    <!-- <el-form-item label="类别" prop="price">
      <el-input
        type="text"
        v-model="ruleForm.categoryId"
        autocomplete="off"
      ></el-input>
    </el-form-item> -->

    <el-form-item label="类别">
        <el-select v-model="ruleForm.categoryId"
         placeholder="类别" 
        >
          <el-option  :label="a.name" :value="a.category_id"
            v-for="a in dynamicTags"
            :key="a.category_id"
          ></el-option>
          
        </el-select>
      </el-form-item>

    <el-upload
      class="avatar-uploader"
      action="http://localhost:8888/common/upload"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
    >商品图片
      <img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>

    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import nestedApi from '@/api/nested';
import CategoryApi from "@/api/Category";

export default {
  data() {
    return {
      ruleForm: {
        name: "",
        description:'',
        price: "",
        imageUrl:'',
        categoryId:""
      },
      dynamicTags:'',//类别

    };
  },
  created() {
    var id = this.$route.params.id;
    console.log("=============" + id);
    
    if (!isNaN(id)) {
      console.log("======isNaN=======" );
      nestedApi.getProductById(id).then(res => {
        console.log( res.data);
        this.ruleForm = res.data;
      })
    }
    this.findList();
    
  },
  methods: {
    //获取类别
    findList() {
      CategoryApi.findList().then((res) => {
        console.log('获取类别'+res)
        this.dynamicTags = res.data;
      });
    },


    submitForm(ruleForm) {
      // mytable.addUser(this.ruleForm).then((res) => {
      //   //成功则刷新页面
      //   console.log("成功");
      //   this.resetForm(ruleForm);
      //   this.$router.push({ name: "lookUser" });
      // });
      nestedApi.updateNew(this.ruleForm).then(res=>{
        this.resetForm(ruleForm);
        this.$router.push({ name: "Menu1" });
      })
    },

    resetForm(ruleForm) {
      this.$refs[ruleForm].resetFields();
    },

    //上传头像成功后
    handleAvatarSuccess(res){
      //http://10.252.36.59:8080/common/download/5fec4dcd-4d8b-49eb-bf1e-e45fee3887b0.jpg
      // res.message
      console.log("====================")
      var url=res.message
      this.ruleForm.imageUrl=process.env.VUE_APP_BASE_API+'/common/download/'+url
      // http://10.252.36.59:8080/common/download/5fec4dcd-4d8b-49eb-bf1e-e45fee3887b0.jpg
      this.$forceUpdate() // 触发强制刷新
      
    }
  },
};
</script>

<style scoped>
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>